<script setup lang="ts">
import XCardHeader from './XCardHeader.vue'
import { useSlots } from 'vue';
interface Props {
    title?: string;
    pd?: string | number
    border?: boolean
}
const props = withDefaults(defineProps<Props>(), {
    pd: '24rpx',
    border: false
});
let uSlots = useSlots();

const cardBodyStyle = computed(() => {
    return {
        padding: isNaN(props.pd) ? props.pd : props.pd + 'rpx',
    }
})

</script>

<template>
    <div class="x-card">
        <template v-if="uSlots.header">
            <slot name="header"></slot>
        </template>
        <template v-else-if="title">
            <XCardHeader :border="border" :title="title">
                <template #right>
                    <slot name="right"></slot>
                </template>
            </XCardHeader>
        </template>

        <div class="x-card-body" :style="cardBodyStyle">
            <slot></slot>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.x-card {
    margin-bottom: 28rpx;
    border-radius: $radius;
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 1%);
    background-color: #fff;

    &-body {
        padding: 24rpx;
    }
}
</style>
